<template>
  <div class="activity">
    <header>
      <webHader
        title="活动列表"
        crumbs="活动赛事,活动列表"
        :backgroundImageUrl="headerBg"
      />
    </header>
    <div class="content">
      <consultationList @handleGoDetail="handleGoDetail" isShowSta isShowTime />
      <Pagination
        :background="true"
        :total="total"
        :current-page.sync="pageNum"
        :page-size.sync="pageSize"
        @pagination-change="paginationChange"
        class="pagination"
      />
    </div>
  </div>
</template>

<script setup>
import headerBg from "~/assets/web/activity-header-bg.png";
const total = ref(50);
const pageNum = ref(1);
const pageSize = ref(10);
const paginationChange = (val) => {};

const handleGoDetail = (consultationId) => {
  const router = useRouter();
  const localePath = useLocalePath();
  router.push(localePath(`/web/activity/${consultationId}`));
};
</script>

<style lang="less" scoped>
.activity {
  width: 100%;

  .content {
    margin: 0 auto;
    padding: 30px 106px 0 106px;
    box-sizing: border-box;
  }

  .pagination {
    width: 100%;
    padding: 0px 60px 30px;
    box-sizing: border-box;

    :deep(.el-pagination) {
      justify-content: flex-start;
    }

    :deep(.el-pager li:hover) {
      color: #1d1b1b !important;
    }

    :deep(.is-active) {
      background-color: #1d1b1b !important;
    }

    :deep(.el-pager .is-active:hover) {
      color: #ffffff !important;
    }
  }
}
</style>
